<template>
	<div class="mine-view-rd">
		<div class="mine-header">
			<div class="func">
				<router-link to="/message" class="h-func-item message"><i class="icon"></i></router-link>
				<router-link to="/userset" class="h-func-item set"><i class="icon"></i></router-link>	
			</div>
			<div class="user-wrap">
				<div class="user-avatar" :style="{backgroundImage:'url('+defaultAvatar+')',backgroundSize:'100% 100%'}"></div>
				<div class="user-info">
					<p class="user-name">{{user.nice_name||user.user_name}}</p>
					<div class="user-zz hadauth" @click="userAuthB">
						<i class="icon icon-dunpai"></i>{{user.investor_status == 1 ? '已认证':'未认证'}}
					</div>
				</div>
			</div>
		</div>
		<div class="mine-contain">
			<div class="user-module c-flow c-bs box-row">
				<div class="flex-1 my-account">
					<p class="label">余额</p>
					<p class="num">0元</p>
				</div>
				<div class="flex-1 my-integral left-1px">
					<p class="label">积分</p>
					<p class="num">0分</p>
				</div>
				<div class="flex-1 my-coupon left-1px">
					<p class="label">代金券</p>
					<p class="num">0张</p>
				</div>
			</div>
			<div class="user-bind c-flow box-row">
				<div class="flex-1 c-bs my-account">
					<a href="javascript:;" @click="limitFunc">
						<p class="label"><i class="icon icon-phone"></i></p>
						<p class="num">绑定手机</p>
					</a>
				</div>
				<div class="flex-1 c-bs my-integral">
					<a href="javascript:;" @click="limitFunc">
					<p class="label"><i class="icon icon-mail"></i></p>
					<p class="num">绑定邮箱</p>
					</a>
				</div>
				<div class="flex-1 c-bs my-coupon">
					<a href="javascript:;" @click="limitFunc">
					<p class="label"><i class="icon icon-fx"></i></p>
					<p class="num">风险测评</p>
					</a>
				</div>
			</div>
			<div class="user-func-list c-flow c-bs">
				<ul class="func-ul">
					<li class="func-li">
						<router-link :to="'/myorder'" tag="div" class="clearfix">
							<div class="func-label"><i class="icon icon-mine-order"></i>我的订单</div>
							<div class="func-content"><span class="h-arrow"></span></div>
						</router-link>
					</li>
					<li class="func-li">
						<router-link :to="'/myaddress'" tag="div" class="clearfix">
							<div class="func-label"><i class="icon icon-mine-address"></i>收件地址</div>
							<div class="func-content"><span class="h-arrow"></span></div>
						</router-link>
					</li>
					<li class="func-li">
						<router-link :to="'/myproject'" tag="div" class="clearfix">
							<div class="func-label"><i class="icon icon-mine-ytxm"></i>已投项目</div>
							<div class="func-content"><span class="h-arrow"></span></div>
						</router-link>
					</li>
					<li class="func-li">
						<router-link :to="'/mycaledar'" tag="div" class="clearfix">
							<div class="func-label"><i class="icon icon-mine-fhrl"></i>分红日历</div>
							<div class="func-content"><span class="h-arrow"></span></div>
						</router-link>
					</li>
<!-- 					<li class="func-li">
						<div class="func-label"><i class="icon icon-mine-yqhy"></i>邀请好友</div>
						<div class="func-content"><a href="javascript:;" class="h-arrow"></a></div>
					</li> -->
					<li class="func-li">
						<router-link :to="'/linkus'" tag="div" class="clearfix">
							<div class="func-label"><i class="icon icon-mine-linkus"></i>联系我们</div>
							<div class="func-content"><span class="h-arrow"></span></div>
						</router-link>
					</li>
					<li class="func-li">
						<router-link :to="'/aboutus'" tag="div" class="clearfix">
							<div class="func-label"><i class="icon icon-mine-aboutus"></i>关于我们</div>
							<div class="func-content"><span class="h-arrow"></span></div>
						</router-link>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<style scoped lang="scss">
	.mine-view-rd{padding-bottom: 55px;}
	.mine-header{
		position: relative;
		padding: a(96px) a(30px) 0;
		@include bg("~__assets/images/mine-header-bg.png",100%,a(270px));
		.user-wrap{
			position: relative;
			padding-left: a(120px);
			color: #ffffff;

			.user-avatar{
				position: absolute;
				top: 0;
				left: 0;
				background-color: #e7f0eb;
				width: a(100px);
				height: a(100px);
				border-radius: 50%;
			}
			.hadauth{
				display: inline-block;
				@include lh(a(50px));
				padding: 0 a(24px) 0 a(20px);
				border-radius: a(30px);
				background: rgba(255,255,255,.5);
			}
			.user-name{
				color: #ffffff;
				font-size: 16px;
				padding-top: 5px;
				margin-bottom: 8px;
				padding-left: 10px;
			}
			.icon-dunpai{
				margin-right: 8px;
				@include bg("~__assets/images/icon/dunpai.png",a(24px),a(29px));
				vertical-align: a(-6px);
			}
		}
		.func{
			position: absolute;
			top: a(40px);
			right: 0;
			.h-func-item{
				display: inline-block;
				margin-right: a(30px);
			}
			.message i{@include bg("~__assets/images/icon/iconfont-message-1.png",17px,16px);}
			.set i{@include bg("~__assets/images/icon/iconfont-set.png",18px,18px);}
		}
	}
	.mine-contain{
		position: relative;
		z-index:2;
		top: a(-30px);
		padding: 0 a(30px);
	}
	.c-bs{
		@include boxShadow(5px);
		border-radius: 10px;
		background-color:#ffffff;
	}
	.c-flow{margin-top: a(15px);}
	.user-module{
		margin-top: 0;
		text-align: center;
		padding-top: a(32px);
		padding-bottom: a(28px);
		.label{
			font-size: 14px;
		}
		.num{
			margin-top: a(20px);
			font-size: 18px;
		}
	}
	.user-bind{
		text-align: center;
		.flex-1{margin-right: a(15px);padding: a(34px) 0 a(20px);;&:last-child{margin-right: 0;}}
		.icon-phone{
			@include bg("~__assets/images/icon/phone.png",a(32px),a(50px));
			margin-bottom: a(12px);
		}
		.icon-fx{
			@include bg("~__assets/images/icon/fx.png",a(44px),a(49px));
			margin-bottom: a(12px);
		}
		.icon-mail{
			@include bg("~__assets/images/icon/mail.png",a(53px),a(38px));
			margin-top: a(6px);
			margin-bottom: a(18px);
		}
	}
	.func-ul{
		padding: 0 a(40px) 0 a(100px);
		.func-li{
			@include lh(a(90px));
			border-bottom: 1px solid #e7e7e7;
			&:last-child{border-bottom:none;}
			.func-label{
				position: relative;
				display: inline-block;
				font-size: 16px;
				float:left;
				.icon{position:absolute;top: 50%;left: -30px;}
				.icon-mine-order{
					margin-top: -9px;
					@include bg("~__assets/images/icon/mine-order.png",16px,19px);
				}
				.icon-mine-address{
					margin-top: -10px;
					left: -32px;
					@include bg("~__assets/images/icon/mine-address.png",20px,20px);
				}
				.icon-mine-ytxm{
					margin-top: -9px;
					left: -32px;
					@include bg("~__assets/images/icon/mine-ytxm.png",19px,19px);
				}
				.icon-mine-fhrl{
					margin-top: -9px;
					left: -32px;
					@include bg("~__assets/images/icon/mine-fhrl.png",17px,18px);
				}
				.icon-mine-yqhy{
					margin-top: -9px;
					left: -32px;
					@include bg("~__assets/images/icon/mine-yqhy.png",18px,18px);
				}
				.icon-mine-linkus{
					margin-top: -8px;
					left: -32px;
					@include bg("~__assets/images/icon/mine-linkus.png",19px,17px);
				}
				.icon-mine-aboutus{
					margin-top: -9px;
					left: -32px;
					@include bg("~__assets/images/icon/mine-aboutus.png",18px,18px);
				}
			}
			.func-content{
				float: right;
			}
		}
	}

</style>

<script>
	import store from '@/store/index'
	import defaultAvatar from '__assets/images/avatar.png';
	export default{
		name: 'mine-view',
		data(){
			return{
				defaultAvatar:store.state.user.user.avatar ? this.BASE_URL+store.state.user.user.avatar : defaultAvatar,
				user:store.state.user.user,
			}
		},
		mounted(){
		},
		methods:{
			userAuthB(){
				this.$router.push({path:'/userauth'})
			},
			limitFunc(){
				this.$vux.toast.text('功能暂未开放')
			}
		}
	};

</script>